
// 今日喝水的总量 单位ml
let count = 5000
// 已达成的量
let reach_count = 0
let subtitle = document.querySelector('.subtitle')
let residue_number = document.querySelector('.residue_number')
subtitle.innerText = `目标:${count}ml`
residue_number.innerText = count + 'ml'
// 瓶子的容量
let bottle_capacity = 250
let bottle_list = document.querySelector('.bottle_list')

// 根据喝水总量和瓶子的容量创建瓶子
for (let i = 0; i < (count / bottle_capacity); i++) {
  bottle_list.appendChild(createdBottle())
}

// 创建瓶子
function createdBottle() {
  let bottle = document.createElement('div')
  bottle.classList.add('bottle_item')
  let text = document.createElement('span')
  text.innerText = bottle_capacity
  bottle.appendChild(text)
  let unit = document.createElement('span')
  unit.innerText = 'ml'
  bottle.appendChild(unit)
  return bottle
}


let bottle_items = document.querySelectorAll('.bottle_item')
let reach = document.querySelector('.reach')
let residue = document.querySelector('.residue')

bottle_items.forEach((bottle, index) => {
  bottle.addEventListener('click', function () {
    if(bottle.classList.contains('active')){
      bottle.classList.remove('active')
      reach_count = reach_count - bottle_capacity
      setBigBottleCapacity()
      return
    }
    reach_count = (index + 1) * bottle_capacity
    setBigBottleCapacity()
    bottle_items.forEach((item,i)=>{
      if(index >= i){
        item.classList.add('active')
      }else{
        item.classList.remove('active')
      }
    })
  })
})


function setBigBottleCapacity() {
  let percent = Math.ceil((reach_count / count) * 100)
  reach.innerText = `${percent}%`
  reach.style.height = percent + '%'
  if (percent <= 0) {
    reach.style.visibility = 'hidden'
  } else {
    reach.style.visibility = 'inherit'
  }

  if (percent >= 90) {
    residue.style.flexDirection = 'row'
    residue_number.style.marginLeft = '10px'
  } else {
    residue.style.flexDirection = 'column'
    residue_number.style.marginLeft = '0'
  }
  residue.style.height = `${100 - percent}%`
    // 剩余量 -- 定时器结束要展示的值
    let residue_count = count - reach_count

    // 当前元素展示的数值
    let cur_count = parseInt(residue_number.innerText)
    if(cur_count > residue_count){
      updateNumberMinus()
    }else{
      updateNumberPlus()
    }
}

function updateNumberPlus() {
  // 剩余量 -- 定时器结束要展示的值
  let residue_count = count - reach_count

  // 当前元素展示的数值
  let cur_count = parseInt(residue_number.innerText)

  // 自增量或自减量
  let increment = residue_count / 200

  if (cur_count < residue_count) {
    setTimeout(updateNumberPlus, 1)
    residue_number.innerText = `${cur_count + increment}ml`
  } else {
    residue_number.innerText = `${residue_count}ml`
  }
}


function updateNumberMinus() {
  // 剩余量 -- 定时器结束要展示的值
  let residue_count = count - reach_count

  // 当前元素展示的数值
  let cur_count = parseInt(residue_number.innerText)

  // 自增量或自减量
  let increment = residue_count / 200

  if (cur_count > residue_count) {
    setTimeout(updateNumberMinus, 1)
    residue_number.innerText = `${cur_count - increment}ml`
  } else {
    residue_number.innerText = `${residue_count}ml`
  }


}
